Skip to content

[ENG-46087] fix(webkit): table select-all tri-state (page-aware) and header-cell sorting#706

Draft
HerbertJulio wants to merge 2 commits into
devfrom
fix/ENG-46087-table-select-all-header-sort
Draft

[ENG-46087] fix(webkit): table select-all tri-state (page-aware) and header-cell sorting#706
HerbertJulio wants to merge 2 commits into
devfrom
fix/ENG-46087-table-select-all-header-sort

Conversation

@HerbertJulio

Copy link
Copy Markdown
Contributor

Summary

Two behavior fixes to the data-driven Table selection and sorting, with no changes to the public API (no new props/events/slots/exports).

Select-all header checkbox — page-aware tri-state. The header select-all checkbox now reflects the current page's selection as a proper tri-state:

  • checked when all rows on the page are selected,
  • indeterminate when only some are,
  • unchecked when none.

It switches from the all-rows TanStack methods to the page-scoped ones (getIsAllPageRowsSelected / getIsSomePageRowsSelected / toggleAllPageRowsSelected). Previously it used all-rows semantics, so on a paginated table selecting every visible row read as "some of N" and never reached the checked state.

Sorting from the whole header cell. Sorting now triggers from the entire sortable header cell — a pointer click anywhere on it, or Enter/Space while it's focused — in addition to the existing sort button. The sort button stops its own click/keydown from bubbling so activating it never double-toggles. Sortable headers are focusable with a focus-visible ring, matching the spec's accessibility intent ("Tab focuses sortable headers; Enter/Space toggles a sortable header").

Notes

  • No regression when not paginated: TanStack's getPaginationRowModel() falls back to the full filtered row model when pagination isn't enabled, so page-scoped selection behaves identically to all-rows in that case.
  • No new dependencies. No breaking changes. Uses the existing Checkbox indeterminate prop and the existing sort event.
  • Verified: ESLint, vue-tsc, spec-compliance and references validators all pass; both SFCs compile; changes confirmed live in Storybook.

Relates to ENG-46087.

…header-cell sorting

Select-all header checkbox now reflects the current page's selection as a
tri-state: checked when all page rows are selected, indeterminate when some
are, unchecked when none. Switches to TanStack's page-scoped
getIsAllPageRowsSelected / getIsSomePageRowsSelected / toggleAllPageRowsSelected
(falls back to the full filtered model when the table is not paginated, so the
non-paginated behavior is unchanged).

Sorting now triggers from the whole sortable header cell — a pointer click
anywhere on it, or Enter/Space while focused — in addition to the sort button.
The sort button stops its own click/keydown from bubbling so activating it
never double-toggles. Sortable headers are focusable with a focus-visible ring,
matching the spec's accessibility intent.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

1 participant